/**
 * 学习目标：常见的受控组件
 * 1. 表单的值和 state 关联
 * 2. onChange
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    name: 'zs',
    intro: '描述',
    city: '2',
    single: true,
  };

  handleChangeName = (e) => {
    this.setState({ name: e.target.value });
  };

  handleChangeIntro = (e) => {
    this.setState({ intro: e.target.value });
  };

  handleChangeCity = (e) => {
    this.setState({ city: e.target.value });
  };

  handleChangeSingle = (e) => {
    this.setState({ single: e.target.checked });
  };

  render() {
    return (
      <div>
        姓名：
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleChangeName}
        />
        <br />
        描述：
        <textarea
          value={this.state.intro}
          onChange={this.handleChangeIntro}
        ></textarea>
        <br />
        城市：
        <select value={this.state.city} onChange={this.handleChangeCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input
          type="checkbox"
          checked={this.state.single}
          onChange={this.handleChangeSingle}
        />
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
